<template>
  <el-drawer
      title="编辑"
      :visible.sync="visible"
      :before-close="handleClose"
      :destroy-on-close="true"
      :wrapperClosable="false"
      :size="this.drawerSize"
  >
    <div class="drawer-content">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="href">
          <el-input v-model="form.href"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="out">
          <el-switch v-model="form.showFlag" />
        </el-form-item>
        <el-form-item label="背景图片" prop="fileId">
          <el-upload
              :action="uploadApi"
              :limit="limit"
              :data="filePicData"
              :file-list="showFilePicList"
              accept="image/*"
              :multiple="false"
              :headers="headers"
              :on-success="handleUpload"
              :on-remove="handleRemove"
          >
            <el-button size="small" v-if="srcList.length === 0" type="primary">上传</el-button>
            <el-button size="small" v-if="srcList.length > 0" type="danger" @click.stop="handleClear">清除</el-button>
          </el-upload>
        </el-form-item>
        <el-image
            v-if="srcList.length > 0"
            style="
            width: 300px;
            height: 169px;
            margin-left: 100px;
            margin-bottom: 24px;
          "
            :src="url"
            :preview-src-list="srcList"
        >
        </el-image>
        <el-form-item label="排序">
          <el-input v-model="form.order"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { DRAWER_SIZE_BIG } from "@/util/constant";
import { deleteArticleApi, uploadAttachmentApi } from "@/api/modules/common.api";
import {
  getTopicDetailApi,
  updateTopicApi,
} from "@/api/modules/websites/columns.api";

export default {
  data() {
    return {
      visible: false,
      limit: 1,
      uploadApi: uploadAttachmentApi,
      filePicData: {
        objType: 1,
      },
      headers: {
        Authorization: `Bearer ${ localStorage.getItem("token") }`,
      },
      showFilePicList: [],
      form: {
        id: "",
        name: "",
        href: "",
        order: 1,
        description: "",
        showFlag: true,
        fileId: "",
      },
      attrIdList: [],
      srcList: [],
      url: "",
      drawerSize: DRAWER_SIZE_BIG,
      rules: {
        name: [{required: true, message: "请输入", trigger: "blur"}],
        href: [{required: true, message: "请输入", trigger: "blur"}],
        fileId: [{required: true, message: "请选择", trigger: "blur"}],
      },
    };
  },

  methods: {
    async init(id) {
      const res = await getTopicDetailApi(id);
      this.form.id = res.id;
      this.form.name = res.name;
      this.form.description = res.description;
      this.form.href = res.href;
      this.form.showFlag = res.showFlag;
      this.form.order = res.order;
      if(res.fileId){
        this.attrIdList.push(res.fileId);
      }
      if(res.filePath){
        this.url = res.filePath;
        this.srcList.push(res.filePath);
      }
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
    },
    async handleAdd() {
      this.form.fileId = this.attrIdList[0];
      if (this.form.fileId) {
        await updateTopicApi(this.form);
        this.$message({
          message: "成功",
          type: "success",
        });
        this.visible = false;
        this.form = {
          id: "",
          name: "",
          href: "",
          order: 1,
          description: "",
          showFlag: true,
          fileId: "",
        };
        this.attrIdList = [];
        this.showFlag = true;
        this.$emit("getParentTableData");
      } else {
        this.$message({
          message: "请检查参数",
          type: "error",
        });
      }
    },
    handleUpload(response, f, fileList) {
      this.attrIdList = [];
      fileList.forEach((item) => {
        if (item.response.errno === 0) {
          this.attrIdList.push(item.response.data.attrId);
        }
      });
      this.srcList = [];
      this.url = fileList[0].response.data.url;
      this.srcList.push(fileList[0].response.data.url);
    },
    handleRemove(file, fileList) {
      this.attrIdList = [];
      fileList.forEach((item) => {
        if (item.response.errno === 0) {
          this.attrIdList.push(item.response.data.attrId);
        }
      });
      this.url = "";
      this.srcList = [];
    },
    async handleClear() {
      await deleteArticleApi({id: this.attrIdList[0]})
      this.attrIdList = [];
      this.url = '';
      this.srcList = []
      this.showFilePicList = []
    }
  },
};
</script>
